﻿<%--
Created by IntelliJ IDEA.
User:
Date: 2020/2/8
Time: 10:15
To change this template use File | Settings | File Templates.
--%>
<%@ page language="java" contentType="text/html; charset=utf-8" isELIgnored="false" pageEncoding="utf-8"%>
<%@ include file="/webpage/common/include/taglib.jsp"%>
<html>
<head>
<meta charset="utf-8">
<meta name="renderer" content="webkit|ie-comp|ie-stand">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
<meta http-equiv="Cache-Control" content="no-siteapp" />
	<!--[if lt IE 9]>
    <%@ include file="/webpage/common/include/ltie9.jsp"%>
    <!--<script type="text/javascript" src="/resources/lib/html5shiv.js"></script>-->
	<!--<script type="text/javascript" src="/resources/lib/respond.min.js"></script>-->
	<![endif]-->
	<%--<link rel="stylesheet" type="text/css" href="static/h-ui/css/H-ui.min.css" />--%>
	<link rel="stylesheet" type="text/css" href="${ctxStatic}/h-ui.admin/css/H-ui.admin.css" />
	<%--<link rel="stylesheet" type="text/css" href="lib/Hui-iconfont/1.0.8/iconfont.css" />--%>
	<link rel="stylesheet" type="text/css" href="${ctxStatic}/h-ui.admin/skin/default/skin.css" id="skin" />
	<%--<link rel="stylesheet" type="text/css" href="static/h-ui.admin/css/style.css" />--%>
	<%@include file="/webpage/common/include/head.jsp"%>
	<!--[if IE 6]>
	<%@ include file="/webpage/common/include/ltie6.jsp"%>
	<script type="text/javascript" src="${ctxLib}/DD_belatedPNG_0.0.8a-min.js" ></script>
    <script>DD_belatedPNG.fix('*');</script>
    <![endif]-->
<title>巡检地址信息</title>
</head>
<body>
<nav class="breadcrumb"><i class="Hui-iconfont">&#xe67f;</i>${pageMenuMsg.firstTitle}<span class="c-gray en">&gt;</span> ${pageMenuMsg.menuName} <span class="c-gray en">&gt;</span> ${pageMenuMsg.secondTitle} <a class="btn btn-success radius r" style="line-height:1.6em;margin-top:3px" href="javascript:location.replace(location.href);" title="刷新" ><i class="Hui-iconfont">&#xe68f;</i></a></nav>
<div class="page-container">
		<input type="hidden" value="10" name="page.pageSize"/>
		<input type="hidden" name="page.pageNo" value="1"/>
		<div class="text-c">
			<input type="text" name="gasId" id="" placeholder="地址编号" style="width:250px" class="input-text">
			<input type="text" name="addName" id="" placeholder=" 地址名称" style="width:250px" class="input-text">
			<button name="" id="searchBtn" class="btn btn-success" type="submit"><i class="Hui-iconfont">&#xe665;</i> 搜索</button>
		</div>
	<div class="cl pd-5 bg-1 bk-gray mt-20"> <span class="l"><a href="javascript:;" onclick="datadel()" class="btn btn-danger radius"><i class="Hui-iconfont">&#xe6e2;</i> 批量删除</a> <a class="btn btn-primary radius" onclick="add('添加地址','${ctxPath}/webpage/modules/address/watchadd-add.jsp',1200,700)" href="javascript:;"><i class="Hui-iconfont">&#xe600;</i> 添加地址</a></span> <span class="r">共有数据：<strong id="count"></strong> 条</span> </div>
	<div class="mt-20">
		<table class="table table-border table-bordered table-bg table-hover table-sort">
			<thead>
				<tr class="text-c">
					<th width="40"><input name="" type="checkbox" value=""></th>
					<th width="80">序号</th>
					<th width="100">地址</th>
					<th width="200">气表编号</th>
					<th width="200">经纬度</th>
					<th width="100">操作</th>
				</tr>
			</thead>
			<tbody id="contentTpl">

			</tbody>
		</table>
        <div  class="cl pd-5 bg-1 bk-gray mt-20">
            <div id="pageIds" class="col-xs-8 col-offset-6"></div>
        </div>
	</div>
</div>

<!--_footer 作为公共模版分离出去-->
<%@include file="/webpage/common/include/footer.jsp"%>
<!--请在下方写此页面业务相关的脚本-->
<script type="text/javascript" src="${ctxLib}/My97DatePicker/4.8/WdatePicker.js"></script>
<script type="text/javascript" src="${ctxLib}/datatables/1.10.0/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="${ctxLib}/laypage/1.2/laypage.js"></script>
<script type="text/javascript" src="${ctxLib}/layui/layui.all.js"></script>
<link href="${ctxLib}/layui/css/layui.css" rel="stylesheet" type="text/css" />
<script type="text/html" id="tpl">
    {{each lists val index}}
    <tr class="text-c">
        <td><input name="" type="checkbox" value=""></td>
        <td>{{index+1}}</td>
        <td>{{val.addName}}</td>
        <td class="text-c">{{val.gasId}}</td>
		<td>{{val.indexs}}</td>
        <td class="td-manage">
            <a style="text-decoration:none" class="ml-5" onClick="edits('信息编辑','/watchadd/updmsg','{{val.watchId}}')" href="javascript:;" title="编辑"><i class="Hui-iconfont">&#xe6df;</i></a>
            <a style="text-decoration:none" class="ml-5" onClick="del(this,'{{val.watchId}}')" href="javascript:;" title="删除"><i class="Hui-iconfont">&#xe6e2;</i></a></td>
    </tr>
    {{/each}}
</script>
<script type="text/javascript">
    // 定义日期格式化过滤器 format 方法：
    function dateFormat(date, format) {
        date = new Date(date);
        var map = {
            "M": date.getMonth() + 1, //月份
            "d": date.getDate(), //日
            "h": date.getHours(), //小时
            "m": date.getMinutes(), //分
            "s": date.getSeconds(), //秒
            "q": Math.floor((date.getMonth() + 3) / 3), //季度
            "S": date.getMilliseconds() //毫秒
        };
        format = format.replace(/([yMdhmsqS])+/g, function(all, t){
            var v = map[t];
            if(v !== undefined){
                if(all.length > 1){
                    v = '0' + v;
                    v = v.substr(v.length-2);
                }
                return v;
            }
            else if(t === 'y'){
                return (date.getFullYear() + '').substr(4 - all.length);
            }
            return all;
        });
        return format;
    }
    template.defaults.imports.dateFormat = dateFormat;
    $.extend( true, $.fn.dataTable.defaults, {

        "searching": false,
        "ordering": false
    });
    $('.table-sort').dataTable({
	"aaSorting": [[ 1, "desc" ]],//默认第几个排序
    "bPaginate": false,//翻页信息
	"bStateSave": true,//状态保存
    "bInfo": true,//数量信息
	"order": []
});


layui.use(['laypage'],function () {
    var laypage = layui.laypage;
    $.ajax({
        url:'${ctxPath}${pageMenuMsg.url}json?page.pageNo='+1+'&page.pageSize='+10,
        type:'get',
        cache:false,
        success:function (res) {
            getPage(res.pageNo,res.count,res.pageSize);
            $("#count").text(res.count);
            var html = template('tpl', {"lists":res.data});
            var container = document.querySelector('#contentTpl');
            container.innerHTML = html;
        },
        error:function (res) {

        }
    });
    //分页
    function getPage(pageNo,count,pageSize) {
        laypage.render({
            elem:$('#pageIds')                //这是元素的id，不能写成"#pageTest"
            , count: count             //数据总数
            , limit: pageSize                      //每页显示条数
            , limits: [10, 20, 30]
            , curr: pageNo                        //起始页
            , groups: 5                      //连续页码个数
            , prev: '上一页'                 //上一页文本
            , netx: '下一页'                 //下一页文本
            , first: 1                      //首页文本
            , last: 100                     //尾页文本
            , layout: ['prev', 'page', 'next','limit','refresh','skip']
            //跳转页码时调用
            , jump: function (obj, first) { //obj为当前页的属性和方法，第一次加载first为true
                // var  page=obj.curr;  //改变当前页码
                // var limit=obj.limit; //当前页面条数
                if (!first) {
                    //非首次加载 do something
                    var  page=obj.curr;  //改变当前页码
                    var limit=obj.limit;
                    // renderTable(page,limit);
                    pageAjax(obj.curr,obj.limit,getParams());
                }
            }
        });
    }
    function pageAjax(pageNo,pageSize,params) {
        $.ajax({
            url:'${ctxPath}${pageMenuMsg.url}json?page.pageNo='+pageNo+'&page.pageSize='+pageSize,
            type:'get',
			data:params,
            cache:false,
            success:function (res) {
                var html = template('tpl', {"lists":res.data});
                var container = document.querySelector('#contentTpl');
                container.innerHTML = html;
                $("#count").text(res.count);
            },
            error:function (res) {
            }
        });
    }
    $("#searchBtn").bind("click",function () {
        // console.log(getParams());
        pageAjax(1,10,getParams());
    });

    function getParams() {
        var gasId = $('input[name="gasId"]').val();
        var addName = $('input[name="addName"]').val();
        var params ={};
        params.gasId = gasId;
        params.addName = addName;
        for(var key in params){
            if(!params[key] ||params[key] == "" )
            	delete(params[key]);
		}
        return params;
    }

});



/*图片-添加*/
function add(title,url,w,h){
    layer_show(title,url,w,h);
}


function edits(title,url,id,w,h){
    if (w == null || w == '') {
        w=800;
    };
    if (h == null || h == '') {
        h=($(window).height() - 50);
    };
    layer.open({
        type: 2,
        area: [w+'px', h +'px'],
        fix: false, //不固定
        maxmin: true,
        shade:0.4,
        title: title,
        content: url+'?key='+id
    });
}

/*图片-删除*/
function del(obj,id){
	layer.confirm('确认要删除吗？',function(index){
		$.ajax({
			type: 'POST',
			url: '${ctxPath}${pageMenuMsg.delUrl}?watchId='+id,
			dataType: 'json',
			success: function(data){
				$(obj).parents("tr").remove();
				layer.msg('已删除!',{icon:1,time:1000});
			},
			error:function(data) {
				console.log(data.msg);
			},
		});		
	});
}
</script>



</body>
</html>